<template>
  <div class="app-container">
    <el-row class="search">
      <el-date-picker
        v-model="query.stime"
        style="width: 150px"
        type="date"
        placeholder="开始"
        value-format="yyyy-MM-dd"
      >
      </el-date-picker>
      <span>-</span>
      <el-date-picker
        v-model="query.etime"
        style="width: 150px"
        type="date"
        value-format="yyyy-MM-dd"
        placeholder="结束"
      >
      </el-date-picker>

      <el-select
        style="width: 150px; margin-left: 5px"
        v-model="query.tjlb"
        placeholder="条件类别"
      >
        <el-option
          v-for="item in [
            {
              value: '1',
              label: '路径名称',
            },
            {
              value: '2',
              label: '分组名称',
            },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-input
        v-model="query.tjms"
        @keyup.enter.native="search"
        style="width: 150px; margin-left: 20px; margin-right: 5px"
        placeholder="临床路径关键字"
      ></el-input>

      <el-select
        style="width: 150px; margin-left: 5px"
        v-model="query.xmlx"
        @change="对比类型_change()"
        placeholder="项目类型"
      >
        <el-option
          v-for="item in [
            {
              value: '检查',
              label: '检查',
            },
            {
              value: '检验',
              label: '检验',
            },
            {
              value: '治疗',
              label: '治疗',
            },
            {
              value: '手术',
              label: '手术',
            },
            {
              value: '药品',
              label: '药品',
            },
            {
              value: '医用材料',
              label: '医用材料',
            },
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-select
        v-model="doctorValue"
        multiple
        filterable
        style="margin-left: 5px; min-width: 300px"
        placeholder="医生"
      >
        <el-option
          v-for="item in doctors"
          :key="item.value"
          :label="item.text"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button type="warning" style="margin-left: 20px" @click="search" round
        >对&nbsp;&nbsp;比</el-button
      >
    </el-row>

    <el-row>
      <el-table
        border
        :data="
          dataLs.slice(
            (disePathsPage - 1) * disePathsSize,
            disePathsPage * disePathsSize
          )
        "
        style="width: 100%; margin-top: 8px"
        v-loading="loading"
      >
        <el-table-column
          prop="路径名称"
          align="center"
          label="路径名称"
          width="200"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="项目名称"
          label="项目名称"
          align="center"
          width="180"
          fixed
        >
        </el-table-column>
        <el-table-column label="路径内项目" align="center">
          <el-dropdown @command="handleCommand" slot-scope="scope">
            <span class="el-dropdown-link">
              {{ 路径内项目_fmt(scope.row)
              }}<i
                class="el-icon-arrow-down el-icon--bottom"
                style="margin-left: 5px; color: #409eff"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-close"
                :command="commandValue(scope.row, 2)"
                >从路径中移除</el-dropdown-item
              >
              <el-dropdown-item
                icon="el-icon-plus"
                :command="commandValue(scope.row, 1)"
                >添加到路径</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-table-column>
        <el-table-column
          v-for="item in docs"
          :prop="item"
          :label="item"
          align="center"
          v-bind:key="item"
        >
          <template slot-scope="scope">
            <el-tooltip placement="top" popper-class="atooltip">
              <div
                slot="content"
                v-html="医生_fmt(scope.row, scope.column, 'ls')"
              ></div>
              <span>{{ 医生_fmt(scope.row, scope.column, "exists") }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="disePathsbasicCostHandleSizeChange"
          @current-change="disePathsbasicCostCurrentChange"
          :current-page="disePathsPage"
          :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]"
          :page-size="disePathsSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataLs.length"
        >
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { UserModule } from "@/store/modules/user";
import { autoFillLjdir } from "@/api/commonApi";
import { doctor } from "@/api/patient";
import { proCmp, procCmpOpt } from "@/api/report";
@Component({
  name: "proCmp",
})
export default class extends Vue {
  private query = {
    stime: "" || this.$route.query.stime,
    etime: this.$route.query.etime || this.Format("yyyy-MM-dd", new Date()),
    s: this.$route.query.s || "",
    st: this.$route.query.st || "",
    page: 1,
    t: (<any>window).MyConf["DataType"] || "出院日期",
    size: 10,
    total: 0,
    current: 1,
    txlb: "1",
    xmlx: "",
    tjlb: "",
    zyys: "",
    // doctorValue: this.$route.query.doctorValue || "",
    c: this.$route.query.c || "",
  };

  private doctorValue: Array<String> = [];

  private 路径目录Value: string = "";
  private 路径目录Loading = false;

  private 对比类型Value: string = "药品";

  private commandValue(r: any, c: any) {
    return {
      row: r,
      command: c,
    };
  }
  private async handleCommand(item: any) {
    let loading = this.$loading({});

    let d = await procCmpOpt({
      操作方式: item.command,
      版本ID: item.row.版本ID,
      项目ID: item.row.项目ID,
    });
    if (d.data?.msg) {
      this.$alert(d.data.msg);
    } else {
      item.row.路径内项目 = item.command == 1 ? true : false;
      this.$alert("操作成功！");
    }

    loading.close();
  }
  private async 远程路径目录(q: string) {
    if (q !== "") {
      this.路径目录Loading = true;

      var r: any = await autoFillLjdir({ s: q });

      if (r.data) {
        r = r.data;
      }
      if (!r) return;

      var ls = r.map((it: any) => ({ value: it.ID, label: it.名称 }));

      this.路径目录Loading = false;
      this.临床路径目录 = ls;
    }
  }

  private 路径内项目_fmt(row: any) {
    return row.路径内项目 ? "√" : "";
  }

  private 医生_fmt(row: any, c: any, pro: string) {
    var property = c.property;
    var key = `${row.路径名称}-${row.项目名称}-${property}`;
    var item = this.glbLs[key];
    if (!item) return "";
    if (pro == "exists") {
      return item ? "√" : "";
    } else {
      var keys = Object.keys(item);
      return keys
        .map((k: string) => `<p ><span>${k}</span>：${item[k]}</p>`)
        .join("");
    }
  }

  private Format(fmt: string, date: Date) {
    //author: meizz
    var o: any = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      S: date.getMilliseconds(), //毫秒
    };
    if (/(y+)/.test(fmt))
      fmt = fmt.replace(
        RegExp.$1,
        (date.getFullYear() + "").substr(4 - RegExp.$1.length)
      );
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          RegExp.$1.length == 1
            ? o[k]
            : ("00" + o[k]).substr(("" + o[k]).length)
        );
      }
    }

    return fmt;
  }

  private 临床路径目录: any = [];

  private async created() {
    let cDate = new Date();
    cDate.setMonth(
      cDate.getMonth() - parseInt((<any>window).MyConf["TIMEINTERVAL"] || "1")
    );
    if (!this.query.stime) {
      this.query.stime = this.Format("yyyy-MM-dd", cDate);
    }
    await this.doctor();
    this.docs = this.doctors.map((it) => it.text);
    //this.search();
  }

  private doctors: Array<any> = [];

  public async doctor() {
    let curDate = new Date();
    let t = `${this.Format("yyyyMMddh", curDate)}${parseInt(
      curDate.getMinutes() / 5 + ""
    )}`;
    let d: any = await doctor({ t: t });
    d = d.data || [];
    this.doctors = [...d.map((it: any) => ({ text: it, value: it }))];
  }
  //动态要生成的列 医生
  private docs: Array<any> = [];

  //数据列表
  private dataLs: Array<any> = [];
  private glbLs: any = {};
  private disePathsSize = 10;
  private disePathsPage = 1;

  private disePathsbasicCostHandleSizeChange(val: number) {
    this.disePathsSize = val;
  }
  private disePathsbasicCostCurrentChange(val: number) {
    this.disePathsPage = val;
  }

  private 对比类型_change() {
    this.search();
  }

  private loading = false;
  private async search() {
    this.disePathsPage = 1;
    //if (!this.路径目录Value) return;
    var docs = "";
    if (this.doctorValue && this.doctorValue.length > 0) {
      docs = this.doctorValue.join("|");
    }
    this.query.zyys = docs;

    this.loading = true;

    var r: any = await proCmp(this.query);

    var data = r.data;
    if (!data || data.length == 0) {
      this.dataLs = [];
      this.loading = false;
      return;
    }
    this.docs = [];
    // this.glbLs = data;
    var 路径项目: Array<any> = [];
    for (var it of data) {
      var 路径名称 = it.路径名称;
      var 项目名称 = it.项目名称;
      if (!this.docs.includes(it.住院医师)) {
        this.docs.push(it.住院医师);
      }
      var key = `${路径名称}-${项目名称}-${it.住院医师}`;
      this.glbLs[key] = {
        "项目使用占比（%）": (it.项目使用占比 * 100).toFixed(2),
        项目例数: it.项目例数,
        病人例数: it.病人例数,
      };
      var match =
        路径项目.filter(
          (it: any) => it.路径名称 == 路径名称 && it.项目名称 == 项目名称
        ).length > 0;
      if (!match) {
        路径项目.push({
          路径名称: 路径名称,
          项目名称: 项目名称,
          路径内项目: it.范围,
          项目ID: it.项目ID,
          版本ID: it.版本ID,
        });
      }
    }

    if (this.doctorValue && this.doctorValue.length > 0) {
      this.docs = <any>this.doctorValue;
    }
    路径项目 = 路径项目.sort((a, b) => a.路径名称.localeCompare(b.路径名称));

    this.dataLs = 路径项目;
    this.loading = false;
  }
}
</script>